<template>
  <div>
    <h1>系统属性</h1>

    <el-tabs v-model="activeName">
      <el-tab-pane label="基本设置" name="first"
        ><el-card>
          <h2>时间和地区</h2>
          <div class="session">
            <div class="row">
              <div class="time">
                <span>本机时间：</span>{{ nowTime }}
                <button @click="getTime()">同步浏览器时间</button>
              </div>
            </div>

            <div class="row">
              <div class="host">
                主机名：
                <el-input
                  placeholder="hostNameValue"
                  v-model="hostNameValue"
                  clearable
                >
                </el-input>
              </div>
            </div>

            <div class="timeZone">
              <template>
                <span>时区：</span>
                <el-select v-model="timeZoneValue" placeholder="Asia/Shanghai">
                  <el-option
                    v-for="item in timeZones"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </div>
          </div>
          <time-async></time-async>
          <!-- <h2>时间同步</h2>
          <div class="session">
            <div class="row">
              <span>启用NTP客户端：</span>
              <el-radio v-model="radio1"></el-radio>
            </div>

            <div class="row">
              <span>启用NTP服务器：</span>
              <el-radio v-model="radio2"></el-radio>
            </div>

            <div class="row">
              <div class="inputed">
                候选NTP服务器：
                <el-input
                  placeholder="serveOneValue"
                  v-model="serveOneValue"
                  clearable
                >
                </el-input>
                <br />
                <el-input
                  placeholder="serveTwoValue"
                  v-model="serveTwoValue"
                  clearable
                  class="twoInput"
                >
                </el-input>
              </div>
            </div>
          </div>  -->
          </el-card
      ></el-tab-pane>

      
      <el-tab-pane label="日志" name="second">日志</el-tab-pane>

      
      <el-tab-pane label="语言和界面" name="third"
        ><el-card>
          <h2>语言和主题</h2>
          <div class="session">
            <div class="row">
              <span>语言：</span>
              <el-select v-model="languageValue" placeholder="中文(Chinese)">
                <el-option
                  v-for="item in languageOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>

            <div class="row">
              <span>主题：</span>
              <el-select v-model="themeValue" placeholder="日间模式">
                <el-option
                  v-for="item in themeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>

           </el-card
      ></el-tab-pane>
    </el-tabs>
    <!-- <el-menu
      :default-active="meumActiveIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">基本设置</el-menu-item>
      <el-menu-item index="2">基本设置</el-menu-item>
      <el-menu-item index="3">基本设置</el-menu-item>
    </el-menu> -->
    <!--    卡片-->
  </div>
</template>

<script>
import TimeAsync from './compoments/Timea-sync.vue';
export default {
  components:{
    TimeAsync
  },
  data() {
    return {
      activeName: "first",
      meumActiveIndex: "1",

      languageOptions: [
        {
          value: "Chinese",
          label: "中文(Chinese)",
        },
        {
          value: "English",
          label: "英文(English)",
        },
      ],
      themeOptions: [
        {
          value: "Whiht",
          label: "日间模式",
        },
        {
          value: "Night",
          label: "夜间模式",
        },
      ],
      timeZones: [
        {
          value: "Asia/Shanghai",
          label: "Asia/Shanghai",
        },
        {
          value: "New York",
          label: "New York",
        },
      ],
      // 当前被选中的el-option的 value 属性值
      timeZoneValue: "Asia/Shanghai",
      languageValue: "中文(Chinese)",
      themeValue: "日间模式",
      hostNameValue: "BW",

      nowTime: "",
    };
  },
  created() {
    this.getTime();
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    getTime() {
      this.nowTime = new Date();
      console.log(111);
    },
  },
};
</script>

<style lang='less' scoped>
.language {
  margin: 20px 0;
}
.session {
  display: block;
  margin: 4%;
  .host {
    padding-left: 16px;
  }
  .timeZone {
    padding-left: 32px;
  }
}
.row {
  margin: 20px 0;

  .twoInput {
    margin-left: 132px;
  }
}
.el-input {
  width: 230px;
}
.box {
  float: left;
}
.box-span {
  display: block;
  width: 100px;
  padding-top: 10px;
}
/* span {
  padding-top: 8px;
} */
</style>